<template>
  <div class="new-comers-module" ref="container">
    <div class="title-group clearfix">
      <img class="icon_t" src="@/assets/icon3.png" />
      <mivaLink :to="to" class="item-title-name">{{ title }}</mivaLink>
      <itemTab :value="tabs" @change="tabChangeHandler" class="i-tab" size="mini" v-if="tabShow" />
      <mivaLink :to="to" class="item-link-more">
        莫多
        <i class="icon" />
      </mivaLink>
    </div>
    <div class="storey-box">
      <template v-if="slotLoad">
        <slot>
          <simpleLoading :isFail="isFail" />
        </slot>
      </template>
    </div>
  </div>
</template>

<script>
import itemTab from '@/components/mivaTab.vue';

export default {
    components: {
        itemTab,
    },
    props: {
        isFail: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '标题',
        },
        to: {
            type: String,
            default: '/',
        },
        tabShow: {
            type: [Boolean, String],
            default: false,
        },
        tabs: {
            type: Array,
            default() {
                return ['有新动态', '最新投稿'];
            },
        },
    },
    data() {
        return {
            slotLoad: false,
            intersectionObserver: new IntersectionObserver(this.intersectionObserverCallback),
        };
    },
    mounted() {
        this.intersectionObserver.observe(this.$refs.container);
    },
    destroyed() {
        this.intersectionObserver.disconnect();
    },
    methods: {
        intersectionObserverCallback([IntersectionObserverEntry]) {
            if (!IntersectionObserverEntry.isIntersecting) return;
            this.slotLoad = true;
            this.intersectionObserver.disconnect(); // 加载完成后自己销毁自己
            this.$emit('load');
        },
        tabChangeHandler(index) {
            this.$emit('tabChange', index);
        },
    },
};
</script>

<style lang="less">
.new-comers-module {
  width: @comersModuleWidth;
  padding-top: @comersModulePaddingBottom;
  box-sizing: initial;
  float: left;
  .title-group {
    padding: 0 20px 15px 0;
    box-sizing: initial;
    zoom: 1;
    .icon_t {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      vertical-align: middle;
      float: left;
      margin-top: -10px;
    }
    .item-title-name {
      font-size: 24px;
      line-height: 24px;
      font-weight: bold;
      margin-right: 20px;
      float: left;
      color: @global_text_color;
    }
    .i-tab {
      float: left;
    }
    .item-link-more {
      float: right;
      width: 52px;
      height: 22px;
      line-height: 22px;
      background-color: transparent;
      border: 1px solid @global_border_color;
      color: @href_text;
      border-radius: 4px;
      text-align: center;
      margin: 0 0 0 10px;
      transition: all 0.2s;
      .icon {
        background-position: -478px -218px;
        width: 6px;
        height: 12px;
        margin: -2px 0 0;
        transition: all 0.2s;
      }
      &:hover {
        background-color: fade(@base_color_2, 60%);
        .icon {
          margin-left: 5px;
        }
      }
    }
  }
  .storey-box {
    min-height: 336px;
    position: relative;
    overflow: hidden;
  }
  .icon-douga {
    background-position: -141px -908px;
  }
  .new-comers-icon {
    width: 30px;
    float: left;
  }
}
</style>
